<template>
  <!--  -->
  <div class="main">
    <div class="content filter">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="路段" prop="road">
              <el-select v-model="formData.road" placeholder="">
                <el-option
                  v-for="item in roadList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="关键字"
              prop="keyword"
              :rules="[
                { required: false, message: '请输入关键字', trigger: ' blur' },
              ]"
            >
              <el-input v-model="formData.keyword" placeholder="请输入关键字" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content table">
      <ttTable
        ref="ttTableCtx"
        :tableHeader="tableHeader"
        :tableData="tableData"
      ></ttTable>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import ttTable from "@/components/tt/tt-table/index.vue";
import useUtils from "@/utils";
const { $common, $router, $store, $global } = useUtils();

let tableHeader = [
  {
    title: "123",
    key: "name",
    type: "selection",
  },
  {
    title: "123",
    key: "image",
    type: "image",
    width: "200",
  },
  {
    title: "321",
    key: "name",
  },
  {
    title: "操作",
    key: "name",
    type: "btns",
    width: "180px",
    btns: [
      {
        name: "编辑",
        bgc: "green",
      },
      {
        name: "详情",
      },
      {
        name: "删除",
        bgc: "red",
      },
    ],
  },
];

let tableData = [
  {
    name: "阿喀琉斯的交付时间的反抗阿喀琉斯的交付时间的反抗精神亢奋就是客服就ask警方撒娇看付款时间看风景精神亢奋就是客服就ask警方撒娇看付款时间看风景",
    image: [
      $common.require("/src/assets/404/404.png"),
      $common.require("/src/assets/404/404.png"),
    ],
  },
];

let roadList = $ref([]);
function getSelectData() {}
let formData = $ref({ road: "", keyword: "" });
</script>
<style lang="scss" scoped>
.filter {
  padding-bottom: 0;
}
.table {
  flex: 1;
  overflow: hidden;
}
</style>
